<template>
  <div class="btn-groups">
    <div v-for="(group, groupIdx) in buttonList" :key="groupIdx" class="btn-groups-div">
      <el-button-group class="btn-groups-flex" v-if="group.length != 1">
        <template v-for="(items, itemsIdx) in group">
          <el-button
            class="btn-groups-items"
            v-hasPermi="[items.permission ? items.permission : '*:*:*']"
            :key="itemsIdx"
            :size="$store.getters.size"
            :type="items.btnType"
            :icon="items.icon"
            :disabled="disabledRender(items)"
            :loading="items.loading"
            @click="buttonClick($event,items.method)"
            plain
          >{{ textRender(items) }}</el-button>
        </template>
      </el-button-group>
      <el-button
        class="btn-groups-items"
        v-hasPermi="[group[0].permission ? group[0].permission : '*:*:*']"
        v-else
        :size="$store.getters.size"
        :type="group[0].btnType"
        :icon="group[0].icon"
        :disabled="disabledRender(group[0])"
        :loading="group[0].loading"
        @click="buttonClick($event,group[0].method)"
        plain
      >{{ textRender(group[0]) }}</el-button>
    </div>
  </div>
</template>

<script>
import { debounce } from "@/utils";
export default {
  props: {
    buttonList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      debounce: null
    };
  },
  computed: {
    btnGroup() {
      const btnGroup = {};
      this.buttonList.flat().forEach(el => {
        btnGroup[el.name] = el;
      });
      return btnGroup;
    }
  },
  methods: {
    disabledRender(item) {
      if (!item.disabled) return false;
      return typeof item.disabled == "boolean"
        ? item.disabled
        : item.disabled();
    },
    textRender(item) {
      return typeof item.text == "string" ? item.text : item.text();
    },
    buttonClick(event, method) {
      method();
      if (!this.debounce) {
        this.debounce = debounce(() => {
          this.debounce = null;
          let target = event.target;
          if (target.tagName != "BUTTON") target = target.parentNode;
          target.blur();
        }, 300);
      }
      this.debounce();
    },
    findBtn(name) {
      return this.btnGroup[name];
    },
    setDisabled(name) {
      if (Array.isArray(name)) {
        name.forEach(i => {
          this.findBtn(i) && (this.findBtn(i).disabled = true);
        });
      } else {
        this.findBtn(name) && (this.findBtn(name).disabled = true);
      }
    },
    setEnabled(name) {
      if (Array.isArray(name)) {
        name.forEach(i => {
          this.findBtn(i) && (this.findBtn(i).disabled = false);
        });
      } else {
        this.findBtn(name) && (this.findBtn(name).disabled = false);
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "@Components/assets/styles/vx-table-variables.scss";
.btn-groups {
  padding: 10px 0 10px 20px;
  margin: 10px 20px 0 20px;
  width: calc(100% - 40px);
  border: 1px solid rgba(211, 211, 211, 0.5);
  border-bottom: none;
  background: $vxe-table-header-background-color;
  overflow-x: auto;
  white-space: nowrap;
  &-flex {
    white-space: nowrap;
    display: inline-block;
    margin-right: 15px;
  }
  &-items {
    padding: 7px 10px;
  }
  &-div {
    display: inline-block;
  }
}
</style>
